<template>
  <a-card>
    <div class="flex">
      <a-input-group compact style="width: 30%">
        <a-select v-model:value="nameOrWorkNo">
          <a-select-option value="name">姓名</a-select-option>
          <a-select-option value="workNo">工号</a-select-option>
        </a-select>
        <a-input
          v-model:value="searchText"
          style="width: 70%"
          placeholder="请输入内容"
        />
      </a-input-group>
      <a-select
        v-model:value="searchUnionText"
        show-search
        placeholder="请选择工会"
        style="width: 20%"
        :options="UnionOptions"
        :filter-option="unionHandleChange"
        @change="unionFilterOption"
      ></a-select>
      <a-select
        v-model:value="searchDeptText"
        show-search
        placeholder="请选择单位"
        style="width: 20%"
        :options="DeptOptions"
        :filter-option="deptHandleChange"
        @change="deptFilterOption"
      ></a-select>
      <a-button type="primary" style="width: 3%">
        <template #icon>
          <search-outlined />
        </template>
      </a-button>
    </div>
  </a-card>
  <MyTable
    :use-number="true"
    :table-data="tableData"
    :columns="columns"
    :pagination="pagination"
  ></MyTable>

</template>

<script setup lang="ts">
import { SearchOutlined } from "@ant-design/icons-vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { getRepresentativeUser } from "@/api/contingent";
import { PaginationProps } from 'ant-design-vue';
import { ref, onMounted } from "vue";
// 页面打开获取数据并赋值给表格
onMounted(() => {
  getRepresentativeUser("1").then((res: any) => {
    tableData.value = res.userList;
  });
});
/**
* 筛选功能
* nameOrWorkNo 根据名字还是工号搜索
* searchText 搜索框内容数据
* searchUnionText 搜索框工号内容
* searchDeptText 搜索框单位内容
* UnionOptions 工会下拉框数据
* DeptOptions 单位下拉框数据
*/ 
const nameOrWorkNo = ref("name");
const searchText = ref("");
const searchUnionText = ref(null);
const searchDeptText = ref(null);
const UnionOptions = ref<any[]>([
  { value: "jack", label: "Jack" },
  { value: "lucy", label: "Lucy" },
  { value: "tom", label: "Tom" },
]);
const DeptOptions = ref<any[]>([
  { value: "jack", label: "Jack" },
  { value: "lucy", label: "Lucy" },
  { value: "tom", label: "Tom" },
]);
const unionHandleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const unionFilterOption = (input: string, option: any) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const deptHandleChange = (value: string) => {
  console.log(`selected ${value}`);
};
const deptFilterOption = (input: string, option: any) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
/**
* 数据显示表格功能 
* pagination 分页数据
* tableData 表格数据
*/
const pagination= ref<PaginationProps>({
  current:1,
  defaultPageSize:10,
  onChange:(page)=>{
    pagination.value.current = page;
  }
})
const tableData = ref<any[]>([]);
const columns = ref([
  {
    title: "姓名",
    dataIndex: "name",
    isShow: true,
    align: "center",
  },
  {
    title: "工号",
    dataIndex: "workNo",
    isShow: true,
    align: "center",
  },
  {
    title: "工会",
    dataIndex: "union",
    isShow: true,
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "dept",
    isShow: true,
    align: "center",
  },
  {
    title: "身份",
    dataIndex: "identity",
    isShow: true,
    align: "center",
  },
]);
</script>

<style scoped lang="less">
:deep(.ant-select) {
  width: 100px;
  margin-right: 20px;
}
:deep(.ant-card-body) {
  padding: 20px;
  // display: flex;
}
.flex {
  display: flex;
}
</style>
